<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>欢迎使用iChat聊天室</title>
  <meta name="description" content="使用vue编写的iChat聊天室的案例">
  <meta name="keywords" content="iChat，socket，Vue，nodejs">
  <meta name="author" content="cleverqin">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link rel="icon" sizes="any" mask href="/static/images/logo.png">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_737314_ykp1exp92.css">
  <link rel="stylesheet" href="/static/css/iChat.css">
</head>
<body>
<!--应用挂在点-->
<div id="app"></div>
<!--主界面模版-->
<template id="chat">
  <div class="iTalk-container-box">
    <login @login="login" v-show="!loginUser.id"></login>
    <div class="iTalk-container" v-show="loginUser.id">
      <div class="iTalk-panel-box">
        <div class="iTalk-panel" v-show="menu=='chat'">
          <div class="iTalk-searchBox">
            <div class="iTalk-login-avatarBox">
              <img :src="loginUser.avatarUrl" alt="">
            </div>
            <div class="iTalk-search-element">
              <span class="iconfont icon-search"></span>
              <input type="text" placeholder="搜索" v-model="keyWord">
            </div>
          </div>
          <div class="iTalk-usersBox">
            <div class="iTalk-userList">
              <user :user="item"
                    :messages="threads[item.id]?threads[item.id]:[]"
                    :setting="setting"
                    v-for="item in searchUser()"
                    @click.native="changeChannel(item)"
                    :class="{active:threadId==item.id}"></user>
              <div class="iTalk-no-user" v-if="searchUser()==0">未查到相关数据</div>
            </div>
          </div>
        </div>
        <div class="iTalk-panel" v-show="menu=='setting'">
          <div class="iTalk-bannerBox">
            <div class="iTalk-user-avatarBox">
              <img :src="loginUser.avatarUrl" alt="">
            </div>
          </div>
          <div class="iTalk-userInfo-box">
            <ul class="iTalk-userInfo-list">
              <li>用户：{{loginUser.name}} <span v-if="loginUser.address">IP:{{loginUser.address}}</span></li>
              <li>
                <span>消息提示音</span>
                <div class="switch-wrap"><input type="checkbox" id="switch" v-model="setting.isVoice"> <label for="switch"></label></div>
              </li>
              <li>
                <span>显示用户名称</span>
                <div class="switch-wrap"><input type="checkbox" id="switch1" v-model="setting.isName"> <label for="switch1"></label></div>
              </li>
              <li>
                <span>显示消息时间</span>
                <div class="switch-wrap"><input type="checkbox" id="switch2" v-model="setting.isTime"> <label for="switch2"></label></div>
              </li>
            </ul>
          </div>
        </div>
        <div class="iTalk-panel" v-show="menu=='about'">
          <div class="iTalk-aboutInfo-box">
            <div class="iTalk-about-header">关于</div>
            <ul class="iTalk-aboutInfo-list">
              <li><span>版本：v1.0</span></li>
              <li><span>协议：MIT</span></li>
              <li><span>GitHub：<a :href="author.repositoriesUrl" target="_blank">源码地址</a></span></li>
              <li><span>邮箱：{{author.email}}</span></li>
              <li>
                  <span class="">
                    <a :href="author.repositoriesUrl" target="_blank">
                      <img :src="'https://img.shields.io/github/stars/'+author.userName+'/'+author.repositoriesName+'?label=Star&amp;style=flat&amp;logo=github'" alt="" style="vertical-align: middle;">
                    </a>
                    <a :href="author.repositoriesUrl" target="_blank">
                      <img :src="'https://img.shields.io/github/forks/'+author.userName+'/'+author.repositoriesName+'?label=Fork&amp;style=flat&amp;logo=github'" alt="" style="vertical-align: middle;">
                    </a>
                  </span>
              </li>
            </ul>
          </div>
        </div>
        <span class="iconfont icon-wifi iTalk-status" :class="{success:isOnline}" v-show="menu!='chat'" @click="isShowLog=!isShowLog"></span>
      </div>
      <div class="iTalk-panel-footer">
        <div class="iTalk-panel-col" :class="{active:menu=='chat'}" @click="menu='chat'">
          <span class="iconfont icon-comments"></span>
          <div>会话</div>
        </div>
        <div class="iTalk-panel-col " :class="{active:menu=='setting'}" @click="menu='setting'">
          <span class="iconfont icon-cog"></span>
          <div>设置</div>
        </div>
        <div class="iTalk-panel-col " :class="{active:menu=='about'}" @click="menu='about'">
          <span class="iconfont icon-info"></span>
          <div>关于</div>
        </div>
      </div>
    </div>
    <div class="iTalk-container iTalk-sessionBox" v-show="channel.id&&isShowSession">
      <div class="iTalk-session-container">
        <div class="iTalk-sessionHeader">
          <span class="iconfont icon-left" @click="isShowSession=!isShowSession"></span>
          {{channel.name}}
          <template v-if="channel.type=='room'">（{{onLineUsers.length}}）</template>
        </div>
        <div class="iTalk-messageBox" :style="{bottom:!isShow?'44px':'174px'}">
          <div class="iTalk-message-list" ref="messageList">
            <wt-message :message="item" :login-user="loginUser" :setting="setting" v-for="item in messages"></wt-message>
          </div>
        </div>
        <div class="iTalk-sessionFooter">
          <div class="iTalk-sendForm">
            <span class="iconfont icon-face" @click.stop="toggleExpression"></span>
            <div class="iTalk-inputBox">
              <input type="text" v-model="text" @keyup.enter="send(text)">
            </div>
            <span class="iTalk-sendBtn" @click="send(text)">发送</span>
          </div>
          <expression @picker-expression="pickerExpression" :show="isShow" ref="expression"></expression>
        </div>
      </div>
    </div>
    <div class="iTalk-logBox" v-show="isShowLog">
      <div class="iTalk-logHeader">
        连接日志
        <span class="iTalk-log-closeBtn iconfont icon-close" @click.stop="isShowLog=false"></span>
      </div>
      <div class="iTalk-log-container" @click.stop="">
        <div class="ui-scroll iTalk-log-list" id="log-container">
          <div class="iTalk-log-item" v-for="log in logs">
            <span :class="'iTalk-log-'+log.type">{{log.text}}</span>
            <span class="iTalk-log-time">{{log.time|time}}</span>
          </div>
        </div>
      </div>
    </div>
    <audio src="/static/images/8400.mp3"></audio>
  </div>
</template>
<!--消息模版-->
<template id="message">
  <div class="iTalk-message-item" :class="message.from.id==loginUser.id?'iTalk-message-send':'iTalk-message-receive'">
    <div class="iTalk-avatarBox">
      <img :src="message.from.avatarUrl" alt="">
    </div>
    <div class="iTalk-message-body">
      <template v-if="setting.isName">
        <div class="iTalk-from-info" v-if="message.from.id!=loginUser.id">
          <span >{{message.from.name}}</span>
          <span class="iTalk-time-span" v-if="setting.isTime">{{message.time|time}}</span>
        </div>
        <div class="iTalk-from-info" v-else>
          <span class="iTalk-time-span" v-if="setting.isTime">{{message.time|time}}</span>
          <span>{{message.from.name}}</span>
        </div>
      </template>
      <div class="iTalk-message-text" v-html="$parserExpression(message.content)"></div>
    </div>
  </div>i
</template>
<!--登录模版-->
<template id="login">
  <div class="iTalk-container iTalk-loginBox">
    <div class="iTalk-loginForm-box">
      <form class="iTalk-login-form">
        <div class="iTalk-loginUser-avatarBox">
          <img :src="user.avatarUrl" alt="" @click.stop="isShow=!isShow">
        </div>
        <div class="iTalk-form-inputBox">
          <input type="text" class="iTalk-user-name" placeholder="用户名" v-model="user.name">
          <input type="text" class="iTalk-user-password" placeholder="密码">
          <button type="button" class="iTalk-formBtn" @click="login(user)">登录</button>
        </div>
      </form>
    </div>
    <transition name="slider">
      <div class="iTalk-select-imgBox" v-show="isShow">
        <div class="iTalk-addAvatar-box">
          <input type="text" v-model="QQ" placeholder="输入QQ号添加使用QQ头像" @click.stop="" @keyup.enter="addQQAvatar(QQ)">
        </div>
        <ul class="iTalk-avatar-list">
          <li :class="{active:user.avatarUrl==item}" v-for="item in avatars">
            <img :src="item" alt="" @click="user.avatarUrl=item">
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<!--用户模版-->
<template id="user">
  <div class="iTalk-users-item">
    <div class="iTalk-user-avatar">
      <img :src="user.avatarUrl" alt="">
      <i class="iconfont" :class="user.deviceType=='pc'?'icon-pc':'icon-phone'" v-if="user.deviceType" :title="user.address"></i>
    </div>
    <div class="iTalk-user-InfoBox">
      <div class="iTalk-user-name">
        {{user.name}}
        <span class="iTalk-message-time">{{lastMessage.time|time}}</span>
      </div>
      <div class="iTalk-user-message">
        {{lastMessage.content}}
        <span class="iTalk-unReaderNum" v-if="unReaderNum!=0">{{unReaderNum}}</span>
      </div>
    </div>
  </div>
</template>
<!--信息提示模版-->
<template id="alter">
  <transition name="alterSlider"
              @after-leave="delELe">
    <div :class="'iTalk-alert iTalk-alter-'+type" ref="alter" v-show="show">{{msg}}</div>
  </transition>
</template>
<!--表情模版-->
<template id="expression">
  <div class="iTalk-expression-panel" v-show="show">
    <div class="iTalk-expression-list">
      <div class="iTalk-expression-item" v-for="item in expressions" @click.stop="pickerExpression(item)">
        <img :src="item.url" :title="item.title">
      </div>
    </div>
  </div>
</template>
<script src="/static/js/vue.min.2.2.0.js"></script>
<script src="/static/js/socket.io.js"></script>
<script src="/static/js/iChat.js"></script>
</body>
</html>